<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			.mui-bar-nav {
				background-color: #FFFFFF;
			}
			.mui-page-content {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background-color: #EFEFF4;
			}
			.mui-scroll-wrapper,
			.mui-scroll {
				background-color: #efeff4;
				padding: 8px 0;
			}
			#back-btn {
				position: fixed;
				bottom: 15px;
				left: 15px;
				width: 45px;
				z-index: 100;
			}
			#hint {
				position: absolute;
				width: 100%;
				text-align: center;
				top: 200px;
				color: #797979;
			}
			
			#hint p {
				font-size: 16px;
				margin-top: 10px;
			}

			#hint img {
				width: 90px;
			}
			
			#deliveries {
				padding-top: 30px;
			}
			
			#deliveries .delivery-item {
				background-color: #FFFFFF;
				margin: 15px 0;
			}
			
			#deliveries .delivery-header {
				padding: 12px 15px;
				font-size: 16px;
				font-weight: 600;
				border-bottom: solid 1px #EFEFF4;
			}
			
			#deliveries .delivery-header .gift-info {
				color: #555555;
				
			}
			
			#deliveries .delivery-header .delivery-status {
				color: #FFA200;
			}
			
			#deliveries .delivery-content {
				padding: 10px 15px;
				font-size: 16px;
			}
			
			#deliveries .delivery-content p {
				font-size: 15px;
				line-height: 1;
				margin: 10px 0;
				color: #656565;
			}
			
			#deliveries .delivery-content p.delivery-name {
				font-weight: 600;
			}
			
			#deliveries .delivery-content p.delivery-name span {
				margin-left: 8px;
			}
			
		</style>
	</head>

	<body>
		<div class="mui-navbar-inner mui-bar mui-bar-nav">
			<h1 class="mui-center mui-title">我的奖品</h1>
		</div>
		<div class="mui-page-content">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<div id="deliveries">
					</div>
					<div id="hint" style="display: none;">
						<img src="img/miao_cry.png" />
						<p>没有奖品呀，去话题里收集徽章吧</p>
					</div>
				</div>
			</div>
		</div>

		<img id="back-btn" src="img/btn_back.png" class="mui-action-back" />
		<script id="deliveries-tpl" type="text/html">
			<div class="deliveries-wrapper">
				{{ each deliveries as delivery i }}
					<div class="delivery-item" data-id="{{ delivery.id }}">
						<div class="delivery-header">
							<span class="gift-info">{{ delivery.gift_info }}</span>
							<span class="mui-pull-right delivery-status">{{ delivery.status }}</span>
						</div>
						<div class="delivery-content">
							<p class="delivery-name">{{ delivery.name }}<span>{{ delivery.mobile}}</span></p>
							<p class="delivery-address">{{ delivery.address }}</p>
							{{ if delivery.status == "已发货" }}
							<p class="delivery-address">{{ delivery.response }}</p>
							{{ /if }}
						</div>
					</div>
				{{ /each }}
			</div>
		</script>
		<script src="js/template.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/av-mini-1.0.js"></script>
		<script>
			var appid = 'kou72um0ioak1kubrz0klwx8a7s3l261mgt54vbyotnblnby';
			var appkey = 'o56bexx1vr522x7ygfkvi7efvbhhmo6x2oaf3txb75wi2509';
			AV.initialize(appid, appkey);
			var Delivery = AV.Object.extend('Delivery');
			var user = AV.User.current();
			mui.plusReady(function() {
				if (user) {
					var delivery_query = new AV.Query(Delivery);
					delivery_query.equalTo("user", user);
					delivery_query.include("gift")
					delivery_query.addDescending('createdAt');
					delivery_query.find().then(function(eles) {
						var deliveries = [];
						console.log(user.id);
						for (var i = 0; i < eles.length; i++) {
							delivery = eles[i];
							deliveries.push({
								id: delivery.id,
								gift_info: delivery.get("gift").get("info"),
								name: delivery.get("name"),
								mobile: delivery.get("mobile"),
								address: delivery.get("address"),
								response: delivery.get("response"),
								status: delivery.get("status"),
							});
							var deliveries_html = template('deliveries-tpl', {
								deliveries: deliveries
							});
							document.getElementById("deliveries").innerHTML = deliveries_html;
						}
						if (eles.length == 0) {
							document.getElementById("hint").style.display = "block";
						}
					});
				} else {
					plus.nativeUI.closeWaiting();
					plus.webview.currentWebview().close();
				}
			});
		</script>
	</body>

</html>